<template>
	<div>
		<p>
			<button @click="add()" class="btn btn-white btn-default btn-round">
				<i class="ace-icon fa fa-edit"></i>
				新增
			</button>
			<button @click="list(1)" style="margin-left: 5px" class="btn btn-white btn-default btn-round">
				<i class="ace-icon fa fa-refresh"></i>
				刷新
			</button>
		</p>
		<!-- 表格 -->
		<table id="simple-table" class="table table-bordered table-hover">
			<thead>
				<tr>
					<th>ID</th>
					<th>名称</th>
					<th>课程ID</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in chapters">
					<td>{{ item.id }}</td>
					<td>{{ item.courseId }}</td>
					<td>{{ item.name }}</td>
					<td>
						<div class="btn-group">
							<button @click="edit(item)" class="btn btn-xs btn-info">
								<i class="ace-icon fa fa-pencil bigger-120"></i>
							</button>
							<button @click="deleteOne(item.id)" class="btn btn-xs btn-danger">
								<i class="ace-icon fa fa-trash-o bigger-120"></i>
							</button>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- 分页组件 -->
		<pagination ref="pagination" v-bind:list="list" v-bind:itemCount="8"></pagination>

		<!-- 弹层 -->
		<div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">添加</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-2 control-label">名称</label>
								<div class="col-sm-10">
									<input v-model="obj.name" class="form-control" placeholder="名称" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">课程ID</label>
								<div class="col-sm-10">
									<input v-model="obj.courseId" class="form-control" placeholder="课程ID" />
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">
							取消
						</button>
						<button v-on:click="save()" type="button" class="btn btn-primary">
							保存
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Pagination from "../../components/pagination";

	export default {
		components: {
			Pagination
		},
		name: "chapter",
		data: function() {
			return {
				chapters: [],
				// 当前页数
				curr: 1,
				// 总数
				total: 0,
				// 每页数量
				size: 5,
				course: {},
				obj: {
				},
			};
		},
		mounted: function() {
			let m = this;
			m.list();
		},
		methods: {
			list(page) {
				let m = this;
				Loading.show();
				m.$ajax
					.post("http://127.0.0.1:9000/business/admin/chapter/list", {
						page: page,
						size: parseInt(m.$refs.pagination.size),
					})
					.then((res) => {
						Loading.hide();
						console.log(res);
						m.chapters = res.data.content.list;
						m.$refs.pagination.render(page, res.data.content.total);
					});
			},
			add() {
				this.chapter = {};
				$("#form-modal").modal("show");
			},
			edit(chapter) {
				this.chapter = $.extend({}, chapter);
				$("#form-modal").modal("show");
			},
			deleteOne(id) {
				let _this = this
				Confirm.show("确定删除", function() {
					_this.del(id);
				});
			},
			save() {
				let _this = this;
				console.log(this.obj);
				
				// 保存校验
				if (!Validator.require(_this.obj.name, "名称") ||
					!Validator.length(_this.obj.courseId, "课程ID", 1, 8)) {
					return;
				}

				Loading.show();
				_this.$ajax.post('http://127.0.0.1:9000/business/admin/chapter/save', _this.obj).then((
					response) => {
					Loading.hide();
					let resp = response.data;
					if (resp.success) {
						$("#form-modal").modal("hide");
						_this.list(1);
						Toast.success("保存成功！");
					} else {
						Toast.warning(resp.message)
					}
				})
			},
			del(id) {
				let m = this;
				Loading.show();
				m.$ajax
					.delete("http://127.0.0.1:9000/business/admin/chapter/delete/" + id)
					.then((res) => {
						Loading.hide();
						let resp = res.data;
						if (resp.success) {
							m.list(1);
							Toast.success("删除成功！");
						}
					});
			},
		},
	};
</script>

<style scoped>
</style>
